<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>create question choice</title>
</head>

<script>

	$(document).ready(function(){
		<c:if test="${fn:length(type) gt 0}">
			$("#title").html("编辑选择题")
			$("#choicecontent").html("${question.content}")
			$("#choiceA").html("${question.ansA}")
			$("#choiceB").html("${question.ansB}")
			$("#choiceC").html("${question.ansC}")
			$("#choiceD").html("${question.ansD}")
			$("#choiceE").html("${question.ansE}")
			$("#choiceF").html("${question.ansF}")
			$("#correctAns").val("${question.answer}")
			<%--$("#correctAns").val("${question.answer}".split("").join(","))--%>
		</c:if>
	});

	function addQuestionChoice()
	{
		let content = $("#choicecontent").val();
		if(content.length === 0) {
			alert('请输入题干');
			return;
		}
		let ansA = $("#choiceA").val();
		let ansB = $("#choiceB").val();
		let ansC = $("#choiceC").val();
		let ansD = $("#choiceD").val();
		let ansE = $("#choiceE").val();
		let ansF = $("#choiceF").val();
		if(ansA.length + ansB.length + ansC.length + ansD.length + ansE.length + ansF.length === 0) {
			alert('请输入选项');
			return;
		}
		let answers = $("#correctAns").val();
		if(answers.length === 0) {
			alert('请输入答案');
			return;
		}
		$.ajax(
			{
				type:"POST",
				url: "<%=ctx%>/question?act=addQuestion&type=choice",
				data: {
					"content" :content,
					"ansA":ansA,
					"ansB":ansB,
					"ansC":ansC,
					"ansD":ansD,
					"ansE":ansE,
					"ansF":ansF,
					"answers": answers
				},
				success: function(data, status) {
					alert(data);
					AjaxLoad('<%=ctx%>/control?act=createChioce')
				},
			  	error: function(req, status, msg) {
					alert(msg)
			  	}
			}
		)
	}


	function updateQuestionChoice()
	{
		let content = $("#choicecontent").val();
		if(content.length === 0) {
			alert('请输入题干');
			return;
		}
		let ansA = $("#choiceA").val();
		let ansB = $("#choiceB").val();
		let ansC = $("#choiceC").val();
		let ansD = $("#choiceD").val();
		let ansE = $("#choiceE").val();
		let ansF = $("#choiceF").val();
		if(ansA.length + ansB.length + ansC.length + ansD.length + ansE.length + ansF.length === 0) {
			alert('请输入选项');
			return;
		}
		let answers = $("#correctAns").val();
		if(answers.length === 0) {
			alert('请输入答案');
			return;
		}
		$.ajax(
				{
					type:"POST",
					url: "<%=ctx%>/question?act=updateQuestion&type=choice&id="+"${question.id}",
					data: {
						"content" :content,
						"ansA":ansA,
						"ansB":ansB,
						"ansC":ansC,
						"ansD":ansD,
						"ansE":ansE,
						"ansF":ansF,
						"answers": answers
					},
					success: function(data, status) {
						alert(data);
						AjaxLoad('<%=ctx%>/control?act=questionOpera')
					},
					error: function(req, status, msg) {
						alert(msg)
					}
				}
		)
	}
</script>

<body>
	<div id="list" class="col-md-10 col-xs-12">

		<h3 id="title">创建选择题</h3>
		<hr>
    
		<div class="fiter col-md-10 col-xs-12">
   			<textarea class="form-control" id="choicecontent" rows="3" placeholder="请输入题干"></textarea>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceA" rows="1" placeholder="答案A"/>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceB" rows="1" placeholder="答案B"/>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceC" rows="1" placeholder="答案C"/>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceD" rows="1" placeholder="答案D"/>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceE" rows="1" placeholder="答案E"/>
			<h5>&nbsp;</h5>
			<textarea class="form-control" id="choiceF" rows="1" placeholder="答案F"/>
			<h5>&nbsp;</h5>
			<input class="form-control" id="correctAns" placeholder="正确答案逗号间隔"/>
			<h5>&nbsp;</h5>
			<c:choose>
				<c:when test="${fn:length(type) gt 0}">
					<button type="button" class="btn btn-success" onclick="updateQuestionChoice()">确定</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn btn-success" onclick="addQuestionChoice()">确定</button>
				</c:otherwise>
			</c:choose>

		</div>
	</div>
</body>
</html>